<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Rasende Roboter</title>
        <script src="socket.io/socket.io.js"></script>
        <script src="js/login.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/interface.js"></script>
       
        <link href="css/bootstrap.css" rel="stylesheet"/>
        <link href="css/login.css" rel="stylesheet"/>
    </head>
    
    <body onload="init('fish')">

    <div class="container">
        <div class="page-header">
            <p class="h1"><img src="img/logo-large.png" alt="logo" /></p>
            <p class="h4">Bienvenu sur le site de jeu en ligne</p>
        </div>

        <p class="h3">Démarre le jeu en 3 clicks</p>
      
        <form method="post" action="" id="nouvellePartie" onsubmit="return checkField()">
             <div class="row">
                <div class="col-lg-4">
                    <p class="h4"><strong>1.</strong> Indique ton login</p>
                </div>
                <div class="col-lg-4">
                    <input type="text" class="form-control" placeholder="Login" name="login" id="login"/>
                </div>
            </div>
  
            
            <div class="row">
                <div class="col-lg-4">
                    <p class="h4"><strong>2.</strong> <span id="celluleLabelNouveau">Crée ta partie</span></p>
                </div>
                <div class="col-lg-1" id="celluleChoixNouveau" style="display:none">
                    <input type = "radio" name = "choix" id = "choixNouveau" value = "new" checked = "checked" />
                </div>
                <div class="col-lg-4" id="celluleNomPartie">
                    <input type="text" class="form-control" placeholder="Nom de la nouvelle partie" id="nouveauNom" onclick="document.getElementById('choixNouveau').checked=true;"/>
                </div>
            </div>
        
 <!-- Affichage des parties sans fish eye avec une liste box : à conserver pour affichage smartphone (?)  
            <div class="row" id="lignesListeParties" style="display:none">
                <div class="col-lg-4">
                </div>
                <div class="col-lg-1">
                    <input type = "radio" name = "choix" id = "choixExistant"  value = "existant"/>
                </div>
                <div class="col-lg-3">
                    <select class="form-control" id="lesParties" name="lesParties" onclick="document.getElementById('choixExistant').checked=true;">
                     </select> 
                </div>
            </div>
   -->   
         
            <div class="row" id="lignesListeParties">
                <div class="col-lg-4">
                </div>
                <div class="col-lg-1" id="lignesListeParties">
                    <input type = "radio" name = "choix" id = "choixExistant"  value = "existant"/>
                </div>
                <div class="col-lg-3" style="text-align:center">
                    <div id="fisheye" class="fisheye">
                        <div class="fisheyeContainter" id='lesParties'>
                        </div>
                    </div> 
                    <input type="hidden" value="" name="idPartieChoisie" id="idPartieChoisie"/>
                </div>
            </div>
       
            <div class="row">
                <div class="col-lg-4">
                    <p class="h4"><strong>3.</strong> Chauffe tes méninges et lance toi !</p>
                </div>
               <div class="col-lg-4">
                    <button class="btn btn-lg btn-primary btn-block" type="submit">Joue</button>
                </div>
            </div>
            <input type="hidden" value="" name="idGame" id="idGame"/>
        </form>

        <div class="modal-footer">
            Mini-projet IHM de M2 MIAGE...
            
        </div>
    </div>
    </body>
</html>

